<template>
  <div class="sectionmp">
    <img :src="props.bg" style="width: 100%"/>
    <div class="mp-win" v-html="getContent(props.data.info[0])"></div>
  </div>
<!--  <tmap-map-->
<!--      :mapKey="props.data['map-key']"-->
<!--      :center="props.data.center"-->
<!--      :zoom="props.data.zoom"-->
<!--      :doubleClickZoom="false"-->
<!--      :control="control"-->
<!--      style="z-index: 9"-->
<!--  >-->
<!--    &lt;!&ndash;      <tmap-multi-marker :styles="markerStyles" :geometries="markerGeometries"/>&ndash;&gt;-->
<!--    <tmap-info-window-->
<!--        v-for="(item, index) in props.data.info"-->
<!--        :position="item.position"-->
<!--        :content="getContent(item)"-->
<!--        :visible="true"-->
<!--        :enable-custom="true"-->
<!--    />-->
<!--  </tmap-map>-->
</template>

<script setup>
import {defineProps, ref} from 'vue';
const props = defineProps(["data", "bg"])

const control = ref({
  scale: {},
  zoom: {
    position: 'bottomRight',
  },
})

const getContent = (param) => {
  if (!param) {
    return ""
  }
  return `
      <div class="addr">
        <div class="title">
          <img src="${param['addr-icon']}" alt=""/> 公司地址
        </div>
        <div class="desc">${param['addr-desc']}</div>
      </div>
      <div class="concat">
        <div class="title">
          <img src="${param['concat-icon']}" alt=""/>联系方式
        </div>
        <div class="desc">
            <p class="item">邮箱：${param['email']}</p>
            <p class="item">电话：${param['phone']}</p>
        </div>

      </div>
`
}

</script>

<style>

</style>
